<template>
  <div class="video-player" :class="{'video-player-full': isFull}" id="video-player">
    <!-- <button @click="test">接收</button> -->
    <div
      v-if="isRtcPlayer"
      :class="[isFull ? 'player-wrap-full' : 'player-wrap']"
      id="player-wrap"
      ref="playerWrap"
      @click="clickContent"
    >
      <div id="video-error" class="player-bg"></div>
    </div>
    <div
      v-else
      :class="[isFull ? 'player-wrap-full' : 'player-wrap']"
      id="player-wrap"
      ref="playerWrap"
      @click="clickContent"
    ></div>
    <div class="player-status-bar" id="player-status-bar" v-show="!isFull">
      <div class="live-icon">
        <img class="live-status" src="@/assets/img/screen/icon_liveSignal.png" />
        <span class="live-status-text">直播中</span>
        <span class="live-status"></span>
      </div>
      <div id="live-switching" class="player-full-screen-icon" @click="hideContent">
        <img src="@/assets/img/screen/icon_more.png" alt="" />
      </div>
    </div>
    <div class="coor" id="coor"></div>
  </div>
</template>

<script lang="ts" setup>
import {watch, ref, onMounted, onUnmounted} from 'vue';
import axios from 'axios';
import {SetUavLive} from './liveManager/setLive.js';

const props = defineProps({
  isFull: Boolean,
  localId: String,
});

const isFull = ref(false);
watch(
  () => props.isFull,
  (val) => {
    isFull.value = val;
  },
);

const emit = defineEmits(['clickContent', 'hideContent']);
const clickContent = () => {
  emit('clickContent');
};
const hideContent = () => {
  emit('hideContent');
};

let client: any;
const isRtcPlayer = ref(false); // 是否使用的是rtc播放
const init = () => {
  // 获取一下是否是rtc推流模式
  const {localId} = props;
  const urlVideo = `${import.meta.env.VITE_MONITOR_URL}/live/getLiveUrl`;
  axios({
    method: 'get',
    url: urlVideo,
    params: {
      flight_mission_id: localId,
    },
  })
    .then((res: any) => {
      if (res.data.live_type !== '') {
        // eslint-disable-next-line no-new
        new SetUavLive('player-wrap', res.data.live, res.data.live_type, localId);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
onMounted(() => {
  init();
});
onUnmounted(async () => {
  if (!isRtcPlayer.value) {
    await client.leave();
  }
});
</script>

<style lang="scss" scoped>
.video-player {
  position: absolute;
  right: 100px;
  top: 20px;
  width: 409px;
  height: 303px;
  background: #d8d8d8;
  overflow: hidden;
  .player-status-bar {
    width: 100%;
    height: 37px;
    background: #000d3f;
    opacity: 0.85;
    position: absolute;
    margin: auto;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    box-sizing: border-box;
    span {
      display: inline-block;
      height: 32px;
    }
    .live-icon {
      height: 37px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .live-status-text {
      color: #00e6ff;
      line-height: 36px;
      font-size: 13px;
      margin-left: 15px;
    }
    .live-status {
      width: 23px;
      height: 23px;
      margin-bottom: -2px;
    }
  }
  #video-player {
    width: 100%;
    height: 100%;
  }
}
.player-full-screen-icon {
  cursor: pointer;
  > img {
    width: 23px;
    height: 23px;
  }
}
.video-player-full {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0;
  z-index: 1;
  background-color: #151515;
}
.player-wrap {
  width: 100%;
  height: 100%;
  background-color: #151515;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  .player-bg {
    height: 263px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
  }
}
.player-wrap-full {
  width: 100%;
  height: 100%;
  z-index: 1;
  .player-bg {
    height: 263px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
  }
}
</style>
